<template>
	<!-- 安全巡检 -->
	<view class="p-10">
		<up-subsection mode="subsection" :list="[{ name: '近7天' }, { name: '近30天' }]" :current="current" @change="fn" />
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="1">
				<template #title>
					<view class="content-item-title"><text class="title-txt">安全巡检统计分析</text></view>
				</template>
				<view class="charts-box" :key="current">
					<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
				</view>
				<view class="charts-box" :key="current">
					<qiun-data-charts type="area" ontouch :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">完成率分析</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="mix" ontouch :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>

			<u-collapse-item name="3">
				<template #title>
					<view class="content-item-title"><text class="title-txt">隐患区域统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" ontouch :opts="opts3" :chartData="chartData3" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
import { getApiFabric } from '@/api/customApi';

const collapse = ref(null),
	showMoreKeys = ref([1, 2, 3]);

/******************************************安全巡检统计分析***************************************/
const current = ref(0),
	chartData = ref({}),
	opts = ref({
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4'],
		padding: [10, 0, 0, 0],
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 0,
			fontSize: 10,
			itemGap: 0
		},
		title: {
			name: '0',
			fontSize: 30,
			color: '#000',
			offsetY: -5
		},
		subtitle: {
			name: '完成率',
			fontSize: 15,
			color: '#000'
		},
		extra: {
			ring: {
				ringWidth: 20,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 10
			}
		}
	});
let chartData1 = ref({}),
	opts1 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [10, 0, 0, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			position: 'top',
			show: true
		},
		xAxis: {
			itemCount: 3
		},
		yAxis: {
			gridType: 'dash',
			showTitle: true,
			data: [
				{
					min: 0,
					title: '个',
					titleOffsetX: -10,
					titleOffsetY: -5
				}
			]
		},
		extra: {
			area: {
				type: 'straight',
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: 'hollow'
			}
		}
	};

let chartData2 = ref({}),
	opts2 = {
		color: ['#1890FF', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		enableScroll: true,
		dataLabel: false,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 10,
			itemGap: 10
		},
		xAxis: {
			itemCount: 2
		},
		yAxis: {
			disabled: false,
			disableGrid: false,
			splitNumber: 5,
			gridType: 'dash',
			dashLength: 4,
			gridColor: '#CCCCCC',
			padding: 10,
			showTitle: false,
			data: [
				{
					position: 'left',
					title: '柱状图'
				},
				{
					position: 'right',
					title: '折线'
				}
			]
		},
		extra: {
			mix: {
				column: {
					linearType: 'opacity',
					linearOpacity: 0.5
				}
			}
		}
	};

const chartData3 = ref({}),
	opts3 = {
		color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
		padding: [0, 0, 0, 0],
		dataLabel: true,
		legend: {
			show: true,
			position: 'top',
			padding: 0,
			margin: 10,
			fontSize: 10,
			itemGap: 10
		},
		title: {
			name: 0,
			fontSize: 25,
			color: '#000'
		},
		subtitle: false,
		extra: {
			ring: {
				ringWidth: 20,
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: true,
				borderWidth: 3,
				borderColor: '#FFFFFF',
				linearType: 'custom'
			}
		}
	};

function fn(index = 0) {
	let params = {};
	current.value = index;
	if (current.value == 1) {
		params = {
			code: 'type',
			value: '2'
		};
	}
	chartData.value = {};
	getApiFabric({
		apiCode: '4672467b-b3b1-4fbf-be8f-afc2d59c1dd5',
		params: [params],
		propertyMapping: {
			name: 's',
			value: 'y'
		}
	}).then((res) => {
		const data = ArrayToObj(res.data, {
			key: 'name',
			val: 'value'
		});
		if (data['计划完成数'] == 0) {
			opts.value.title.name = '100%';
		} else {
			opts.value.title.name = ((data['实际完成数'] / data['计划完成数']) * 100).toFixed(1) + '%';
		}
		chartData.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
	chartData1.value = {};
	getApiFabric({
		params: [params],
		apiCode: '51f19e3c-f581-4daa-8303-66f4c3beca61',
		propertyMapping: {
			x: 'dateStr',
			y1: 'planTaskCount',
			y2: 'successTaskCount'
		}
	}).then((res) => {
		const groups = res.data.reduce(
			(groups, person) => {
				groups.categories.push(person.x);
				groups.y1.push(person.y1);
				groups.y2.push(person.y2);
				return groups;
			},
			{
				categories: [],
				y1: [],
				y2: []
			}
		);

		chartData1.value = JSON.parse(
			JSON.stringify({
				categories: groups.categories,
				series: [
					{
						name: '计划完成数',
						data: groups.y1
					},
					{
						name: '实际完成数',
						data: groups.y2
					}
				]
			})
		);
	});

	chartData2.value = {};
	getApiFabric({
		apiCode: 'b860664b-083c-4e09-965e-584cf5016794',
		params: [
			{
				code: 'type',
				value: current.value == 0 ? '1' : '2',
				wid: '852d3541-4411-11ef-bf68-9fea635c6fb9'
			}
		],
		propertyMapping: {
			x: 'deptName',
			y: 'taskCount',
			z: 'successRate'
		}
	}).then((res) => {
		const resData = res.data.reduce(
			(prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				prev.series1.push(Number(cur.y));
				prev.series2.push(Number(cur.z));
				return prev;
			},
			{
				categories: [],
				series1: [],
				series2: []
			}
		);
		chartData2.value = {
			categories: resData.categories,
			series: [
				{
					name: '任务数',
					index: 0,
					type: 'column',
					data: resData.series1
				},
				{
					name: '完成率',
					index: 1,
					type: 'line',
					data: resData.series2
				}
			]
		};
	});

	chartData3.value = {};
	getApiFabric({
		apiCode: '84afebc3-5f9c-4706-8051-6e2b8198c868',
		params: [
			{
				code: 'type',
				value: current.value == 0 ? '1' : '2',
				wid: '852d3541-4411-11ef-bf68-9fea635c6fb9'
			}
		],
		propertyMapping: {
			s: 'areaName',
			y: 'num'
		}
	}).then((res) => {
		res.data.forEach((item) => {
			item.name = item.s;
			item.value = item.y * 1;
			delete item.s;
			delete item.y;
		});
		chartData3.value = JSON.parse(
			JSON.stringify({
				series: [
					{
						data: res.data
					}
				]
			})
		);
	});
}

function getServerData(refresh) {
	Promise.all([fn()]).then(() => {
		if (refresh) {
			nextTick(() => {
				uni.stopPullDownRefresh();
			});
		}
	});
}

onShow(() => {
	getServerData();
});

onPullDownRefresh(() => {
	getServerData(true);
});
</script>

<style lang="scss" scoped>
.scroll-item {
	background: rgb(245, 249, 253);
	border-radius: 8rpx;
	padding: 20rpx;

	.title {
		width: 30%;
		text-align: right;
		margin-right: 10rpx;
	}

	.value {
		color: #999;
	}
}
</style>
